<script setup>
// import { getConfig, setConfig, resetConfig } from '@/config/config.js';

// // 获取配置
// console.log('a:', getConfig('a'));
// console.log('a.b:', getConfig('a.b'));
// console.log('a.b.c:', getConfig('a.b.c'));

// // 动态设置
// setConfig({ ... })

// // 重置配置
// resetConfig()

const handleClickMini = () => {
  AMessage.info('点击了mini AButton!');
};
</script>

<template>
  <div class="w-full flex justify-center items-center flex-1">
    <div class="w-full h-300px flex justify-center items-center">
      <div class="w-150px h-150px rounded-[50%] bg-[var(--color-fill-1)] flex justify-center items-center">
        <icon-ri-hammer-fill class="text-52px" />
      </div>
    </div>
  </div>
  <div>hello, 这是toolsdog home page!点击ArcoResolver 组件的Minibutton,显示AMessage</div>
  <a-space>
    <a-button type="primary" size="mini" @click="handleClickMini">Mini</a-button>
    <a-button type="primary" size="small">Small</a-button>
    <a-button type="primary">Medium</a-button>
    <a-button type="primary" size="large">Large</a-button>
  </a-space>
  <HelloWorld msg="'父组件向子组件传递参数'" />
  <div class="text-20px">哈哈哈</div>
  <div class="icon-style bg-pink h-30px">
    <icon-ep-alarm-clock class="text-20px" />
    <icon-home-copy class="text-20px" />
    <icon-user-download class="text-20px" />
  </div>
  <div>
    <button class="btn-style">unocssButton</button>
  </div>
</template>

<style scoped>
.icon-style {
  @apply my-10px;
}
.btn-style {
  @apply bg-blue-400 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200;
  @apply hover:bg-blue-500;
  @apply dark:bg-blue-500 dark:hover:bg-blue-600;
}
</style>
